<template>
  <div ref="echartRef" :style="{ width: width, height: height }">echarts</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import * as echarts from "echarts";
import { EChartsOption } from "echarts";
import useEcharts from "../hooks/useEcharts";

export default defineComponent({
  props: {
    width: {
      type: String,
      default: () => "100%",
    },
    height: {
      type: String,
      default: () => "300px",
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const echartRef = ref<HTMLElement>();
    onMounted(() => {
      // const echartInstance = echarts.init(echartRef.value!);
      // const options = props.options;
      // echartInstance.setOption(options);

      const { setOption } = useEcharts(echartRef.value!);
      setOption(props.options);
    });
    return {
      echartRef,
    };
  },
});
</script>
